<template>
  <div class="stu">
    <h2>学生姓名：{{ name}}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <!-- 可以简写成@sendStuName="xxx" -->
    <button @click="sendStudentName">把学生名传递给app</button>

    <!-- 和定时器类似，如果不用了，在一个合适的时机去解绑它 -->
    <button @click="unbindPerEve">解绑自定义事件</button>

    <button @click="deathVC">销毁当前的student组件的实例（vc）</button>
    <h2>{{number}}</h2>
    <button @click="add">点我nubmer++</button>
</div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: 'VueCli12345',
      sex: '男',
      number:0
    };
  },
  methods: {
    sendStudentName() {
      //emit触发绑定在指定vc上的自定义事件 vc实例对象可以使用该方法
      //后面多余参数演示es6的参数收集
      this.$emit('personEvent', this.name, this.sex, 66)
      this.$emit('personEvent2', this.name, this.sex, 66) //同时触发两个事件
    },
    unbindPerEve() {
      //解绑事件
      // this.$off('personEvent') // 这种写法只能解绑一种自定义事件
      // this.$off([ 'personEvent', 'personEvent2' ]);// 解绑多个事件，参数为包含多个事件名的数组
      this.$off(); //比较暴力，有几个自定义事件就全给你解绑了
    },
    deathVC() {
      this.$destroy() // 销毁当前组件实例，销毁后所有该实例的自定义事件都不奏效了
    },
    add() {
      console.log('add 被调用了')
      this.number++
    }
  }
};
</script>

<style scoped>
.stu {
  background-color: skyblue;
}
</style>